import React,{useState,useEffect} from 'react'
import {Table ,Tag,Button,Modal,Popover,Switch} from 'antd'
import axios from 'axios'
import {EditOutlined,DeleteOutlined,ExclamationCircleOutlined} from '@ant-design/icons'

// import {jsonServer} from '../../../api/index'

const {confirm} =Modal
export default function RightList() {

  const [dataSource,setdataSource] =useState([]);
  // 请求数据
  useEffect(()=>{
    axios.get('http://localhost:5000/rights?_embed=children').then(res=>{
      //拿到数据之后进行设置，因为设置权限的时候首页是没有二级的，不需要带展开的功能
      const list=res.data
      // list[0].children=''
      list.map(item=>{
        if(item.children.length<=0){
         return item.children=''
        }else{
          return item
        }
      })
      setdataSource(list)
      console.log(res.data)
     })
  },[])
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id', //对应dataSource中的name项
      render:(id)=>{  //定制样式
        return <b>{id}</b>
      }  
    },
    {
      title: '权限名称',
      dataIndex: 'label',
    },
    {
      title: '权限路径',
      dataIndex: 'key',
      render:(key)=>{
        return <Tag color='orange'>{key}</Tag>  //使用antd的tag标签
      }
    },
    {
      title:'操作',
      // render的参数item是点击的那一条对象
      render:(item)=>{
        return <div>
          {/* 加上antd的按钮属性 */}
          <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} onClick={()=>confirmMytitle(item)}/> {/**删除按钮 */}
          {/**antd中的气泡卡片，用来做配置项开关操作的外壳 content里面的内容,Switch是antd的开关样式，做成开关的
           * 因为二级不具备配置项的开关，与后台协商的是有pagepermisson这一项才具有这一项权利，所以要给button按钮上加上disabled属性，判读昂一下如果pagepermisson为undefined也就是没有的话是禁用的
           * 按钮是禁用的，但是气泡卡片propover还是能打开的，所以要设置trigger
          */}
          <Popover content={<div style={{textAlign:'center'}} >
            {/* onChange设置开关状态 */}
            <Switch checked={item.pagepermisson} onChange={()=>{changePageper(item)}}></Switch>
          </div>} title="页面配置项" trigger={item.pagepermisson===undefined ? '':'click'}>
             <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={item.pagepermisson===undefined}/>
          </Popover>
          </div>
      }
    }
  ];
  const changePageper=(item)=>{
    //无限取反，再赋值修改
    item.pagepermisson = item.pagepermisson===1 ? 0 : 1;
    // 重新更新数据
    setdataSource([...dataSource])
    // 判断是几级数据
    if(item.grade===1){
      axios.patch(`http://localhost:5000/rights/${item.id}`,{
        pagepermisson:item.pagepermisson
      })
    }else if(item.grade===2){
      axios.patch(`http://localhost:5000/children/${item.id}`,{
        pagepermisson:item.pagepermisson
    })
    }
  }
  const confirmMytitle=(item)=>{
    confirm({
      title: '你确定删除嘛?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        // console.log(item);
        deleteObject(item)
      },
      onCancel() {
        console.log('取消');
      },
    });
  }
  const deleteObject=(item)=>{
   console.log(item)
  //  要同时删掉页面当前的状态和后台状态,一般会有删除的接口
  //  过滤掉当前的id不等于删除的那个id 这样写的话刷新的时候后端的还会回来，所以需要删除后端的数据，删除的是当前点击的那项的id
  //这是第一级的删除 grade等于1
  if(item.grade===1){
    // 过滤掉其他跟点击的id不相同的项目对象
    setdataSource(dataSource.filter(data=>data.id!==item.id))
    axios.delete(`http://localhost:5000/rights/${item.id}`)
  }else if(item.grade===2){
    // console.log(2)
    //这里是浅拷贝，重新赋值新的数组，相当于改变了地址，就能监听到状态的改变，从而从新render
    // 浅拷贝直接把想要拷贝的引用数据类型给要保存的变量就行，修改的时候前面的数据也会收到影响。
    let list = dataSource.filter(data=>data.id===item.rightId)
    list[0].children =list[0].children.filter(data=>data.id!==item.id)
    console.log(list,dataSource)
    //重新更新状态
    setdataSource([...dataSource])
    axios.delete(`http://localhost:5000/children/${item.id}`)
  }
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} pagination={ //添加分页器的效果
        {pageSize:5}
      } />
    </div>
  )
}
